<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="javascript:void(0)">问卷你管理</a></li>
            <li class="active">问卷列表</li>
        </ol>
    </div>
    <div class="row">
        <form id="formData" class="form-inline">
            <div class="form-group">
                <label for="paperName">标题</label>
                <input type="text" class="form-control" name="paperName" id="paperTitle" placeholder="问卷标题" />
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">状态</label>
                <select id="paperStatus" name="status" class="form-control">
                    <option value="0">全部</option>
                    <option value="1">开放</option>
                    <option value="2">关闭</option>
                    <option value="3">废弃</option>
                </select>
            </div>
            <div class="form-group">
                <label for="paperName">时间范围</label>
                <input type="text" class="form-control" name="startTime" id="startTime" placeholder="开始时间" />
                ~
                <input type="text" class="form-control" name="endTime" id="endTime" placeholder="结束时间" />
            </div>
            <button id="searchBtn" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </form>
    </div>
    <div class="row">
        <table id="paperList" class="table"></table>

        <div id="opBar">
            <a onclick="detail(this)" href="javascript:void(0)"><span class="glyphicon glyphicon-zoom-in"
                    aria-hidden="true"></span></a>
            /
            <a onclick="inputEdit(this)" href="javascript:void(0)"><span class="glyphicon glyphicon-edit"
                    aria-hidden="true"></span></a>
            /
            <a onclick="deleteList(this)" href="javascript:void(0)"><span class="glyphicon glyphicon-trash"
                    aria-hidden="true"></span></a>
            /
            <a onclick="dataList(this)" href="javascript:void(0)"><span class="glyphicon glyphicon-ok"
                    aria-hidden="true"></span></a>
            /
            <a onclick="showDetail(this)" href="javascript:void(0)"><span class="glyphicon glyphicon-qrcode"
                    aria-hidden="true"></span></a>
        </div>
    </div>
    <div class="row">
        <nav id="pageBar" aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- 详情的弹窗 -->
        <!-- Modal -->
        <div class="modal fade" id="paperDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 h4 class="modal-title" id="myModalLabel">问卷详情</h4>
                    </div>
                    <div class="modal-body">
                        <ul class="list-group">
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        var detailUrl = "http://127.0.0.1:8080/paper/queryById";
        var fieldListUrl = "http://127.0.0.1:8080/paper/field/queryByPaperId";
        var selectorListUrl = "http://127.0.0.1:8080/paper/selector/queryByFieldId";
        function detail(ele) {
            // 取出问卷的id
            var paperId = $(ele).parent().attr("dataid");
            //查询问卷的详情数据
            $.get(detailUrl, { paperId: paperId }, function (result) {
                var ul = $("#paperDetail .modal-body ul");
                ul.empty();
                if (result.code == 200) {
                    if (result.obj) {
                        var paper = result.obj;
                        ul.append("<li class='list-group-item'><h3>" + paper.paperTitle + "</h2></li>");
                        ul.append("<li class='list-group-item'>" + paper.paperDesc + "</li>");
                        ul.append("<li class='list-group-item'><hr/></li>");
                        //查询所有的域
                        $.get(fieldListUrl, { paperId: paperId }, function (res) {
                            if (res.code == 200) {
                                if (res.data) {
                                    //处理所有的域
                                    $.each(res.data, function (index, item) {
                                        // 显示域
                                        var li = $("<li class='list-group-item' fieldId='" + item.fieldId + "'>");
                                        li.append("<h4>" + item.fieldName + "</h4>");
                                        if (item.fieldDesc) {
                                            li.append("<i>" + item.fieldDesc + "</i>")
                                        }
                                        //判断域的类型
                                        switch (item.fieldType) {
                                            case 1://文本说明
                                                //li.append("<b>"+item.fieldDesc+"</b>")
                                                break;
                                            case 2://单行文本框
                                                li.append("<input type='text' class='form-control' name='text" + item.fieldId + "'>");
                                                break;
                                            case 3://多行文本
                                                li.append("<textarea name='textarea" + item.fieldId + "' rows='3' class='form-control'></textarea>");
                                                break;
                                            case 4://单选按钮
                                                $.get(selectorListUrl, { fieldId: item.fieldId }, function (selectorRes) {
                                                    // 处理选项
                                                    if (selectorRes.code == 200) {
                                                        if (selectorRes.data) {
                                                            $.each(selectorRes.data, function (index, item) {
                                                                li.append("<div class='radio'><label><input type='radio' value='" + item.selectorText + "' name='radio" + item.fieldId + "'>" + item.selectorText + "<label></div>");
                                                            });
                                                        }
                                                    }
                                                });
                                                break;
                                            case 5://多选按钮
                                                $.get(selectorListUrl, { fieldId: item.fieldId }, function (selectorRes) {
                                                    // 处理选项
                                                    if (selectorRes.code == 200) {
                                                        if (selectorRes.data) {
                                                            $.each(selectorRes.data, function (index, item) {
                                                                li.append("<div class='checkbox'><label><input type='checkbox' value='" + item.selectorText + "' name='checkbox" + item.fieldId + "'>" + item.selectorText + "<label></div>");
                                                            });
                                                        }
                                                    }
                                                });
                                                break;
                                        }
                                        //将li加入ul
                                        ul.append(li);
                                    });
                                }
                            }
                            //展示窗体
                            $("#paperDetail").modal('show');
                        });
                    }
                }
            });
        }
        function inputEdit(ele) {
            paperId =$(ele).parent().attr("dataid");
            $('#content').load('paper-create.html');
        }

        function showDetail(ele){
            // alert($(ele).parent().attr("dataid"));
        location.href = "paper-detail.html?paperId="+$(ele).parent().attr("dataid");
}
// 已经提交的数据列表事件
function dataList(ele){
    // 给全局的
    answerListPaperId = $(ele).parent().attr("dataid");
    // 加载answerlist
    $("#content").load("paper-answer-list.html");
}

        function deleteList(ele) {
            var ele = $(ele);
            var paperId = ele.parent().attr("dataId");
            if (confirm("您确定要删除id为" + paperId + "的通知吗？")) {
                $.get(
                    "http://localhost:8080/paper/updateStatus", {
                    paperId: paperId
                },
                    function (data) {
                        if (data.msg == "ok") {
                            msgAlert("删除成功", "删除");
                        } else {
                            msgAlert("删除失败", "删除");
                        }
                    }
                );
            }
        }

        $("#startTime").datetimepicker({
            lang: "ch",
            format: "Y-m-d H:i:s",
        });
        $("#endTime").datetimepicker({
            lang: "ch",
            format: "Y-m-d H:i:s",
        });

        var url = "http://localhost:8080/paper/query";
        var colums = [{
            field: "paperId",
            title: "#",
        },
        {
            field: "paperTitle",
            title: "标题",
            formatter: function (value) {
                if (value.length > 5) {
                    return value.substring(0, 4) + "...";
                }
                return value;
            },
        },
        {
            field: "paperCreated",
            title: "创建时间",
            formatter: function (value) {
                return value.substring(0, value.length);
            },
        },
        {
            field: "paperStatus",
            title: "状态",
            formatter: function (value) {
                //这里的formatter函数就是格式化函数。
                // value就是这一列的原始值（1,2,3）
                // 这个函数的返回值将显示在页面上。
                return value == 1 ? "开放" : value == 2 ? "关闭" : "废弃";
            },
        },
        {
            field: "paperCount",
            title: "提交人数",
            formatter: function (value) {
                if (value == 0) {
                    return "暂无人员提交";
                }
                return "提交人数:" + value;
            },
        },
        {
            field: "st9527-options",
            title: "操作",
            barId: "opBar",
        },
        ];
        st9527.table(
            "paperList",
            colums,
            url, {
            page: 1,
            size: 10,
        },
            "pageBar"
        );

        $("#searchBtn").bind("click", function () {
            page = 1;
            queryData(page);
        });

        function queryData(page) {
            let url = "http://localhost:8080/paper/queryPaper";
            var papers = {
                page: page,
                size: 10,
                paperTitle: $("#paperTitle").val(),
                paperStatus: $("#paperStatus").val(),
                startTime: $("#startTime").val(),
                endTime: $("#endTime").val(),
            };
            console.log(papers);
            st9527.table("paperList", colums, url, papers, "pageBar");
        }
    </script>
</body>

</html>